import QtQuick 1.1
import com.nokia.meego 1.0
import "Logic.js" as Logic

Page {
    id: pageAddCategory

    property string __idCategoryEdit: ""

    tools: ToolBarLayout {
        id: tool_only_back
        opacity: userTheme.opacityToolbar
        ToolIcon {
            id: toolIconBack
            //iconId: "toolbar-back"
            iconSource: "images/toolbar/back.png"
            onClicked: {
                pageStack.pop();
            }
        }
        ToolIcon {
            id: toolIconOk
            //iconId: "toolbar-done"
            iconSource: "images/toolbar/ok.png"
            onClicked: {
                var category = categoryNameInput.text
                var descr = categoryCommentInput.text

                var str = ""

                if( category == "" ) {
                    str = qsTr("Enter the category name")
                    dlgSaveCategoryOk.openDlg( str )
                } else if ( pageCategoryList.isEditCategory === false ) {
                    var ri = Logic.addCategory( category, descr )
                    if(ri) {
                        pageStack.pop();
                        pageCategoryList.getAllCategory()
                    } else {
                        str = qsTr("Failed to save")
                        dlgSaveCategoryOk.openDlg( str )
                    }
                } else {
                    var ru = Logic.updateCategory( pageCategoryList.selCategoryId, category, descr )
                    if(ru) {
                        pageStack.pop();
                        pageCategoryList.getAllCategory()
                    } else {
                        str = qsTr("Failed to update")
                    }
                }

            }
        }
    } //ToolBarLayout


    /************************************************************************/
    function initForm() {
        if( pageCategoryList.isEditCategory ) {
            categoryNameInput.text = pageCategoryList.selCategoryName
            categoryCommentInput.text = pageCategoryList.selCategoryDescr
            __idCategoryEdit = pageCategoryList.selCategoryId
        }
    }


    /************************************************************************/

    QNMTitle {
        id: titlePage
        text: pageCategoryList.isEditCategory ? qsTr("Edit category") : qsTr("Add category")
        image: "images/categories.png"
        busy: false
    }

    BackgroundPage { }


    Flickable {
        id: flickArea
        anchors {
            top: titlePage.bottom
            bottom: parent.bottom
            left: parent.left
            right: parent.right
            topMargin: screen.orientationString == "Landscape" || screen.orientationString == "LandscapeInverted" ? 5 : 15
            leftMargin: screen.orientationString == "Landscape" || screen.orientationString == "LandscapeInverted" ? 40 : 20
            rightMargin: screen.orientationString == "Landscape" || screen.orientationString == "LandscapeInverted" ? 40 : 20
            bottomMargin: screen.orientationString == "Landscape" || screen.orientationString == "LandscapeInverted" ? 5 : 15
        }

        flickableDirection: Flickable.VerticalFlick

        width: parent.width
        height: parent.height

        contentWidth: contentFlickArea.width
        contentHeight: contentFlickArea.height
        clip: true

        Column {
            id: contentFlickArea
            width: parent.width
            spacing: 10

            Text {
                text: qsTr("Name of category")
                font.pixelSize: 30
            }

            TextField {
                 id: categoryNameInput
                 //width: (screen.orientationString == "Portrait") || (screen.orientationString == "PortraitInverted") ? 440 : 810
                 width: flickArea.width
                 placeholderText: qsTr("Name of category")

                 Image {
                     anchors { right: parent.right; verticalCenter: parent.verticalCenter }
                     id: clearText
                     fillMode: Image.PreserveAspectFit
                     smooth: true;
                     visible: categoryNameInput.text
                     source: "image://theme/icon-m-toolbar-backspace"
                     height: parent.height
                     //width: parent.height

                     MouseArea {
                         id: clear
                         anchors.fill: parent
                         onClicked: {
                             categoryNameInput.text = ""
                             categoryNameInput.forceActiveFocus()
                         }
                     }
                 }
            }

            Item { height: 50; width: parent.width }

            Text {
                text: qsTr("Comment")
                font.pixelSize: 30
            }

            TextArea {
                //width: (screen.orientationString == "Portrait") || (screen.orientationString == "PortraitInverted") ? 440 : 810
                width: flickArea.width
                height: 400
                id: categoryCommentInput
                placeholderText: qsTr("Write your comment here")
                wrapMode: TextEdit.WordWrap
                clip: true
            }

        }
    }

    Component.onCompleted: { initForm(); }

    QueryDialog {
        id: dlgSaveCategoryOk
        title: Image {
            anchors.horizontalCenter: parent.horizontalCenter
            //source: "image://theme/icon-l-user-guide"
            source: "images/info.png"
        }
        property alias text: dlgSaveCategoryOk.message
        function openDlg( text ) {
            dlgSaveCategoryOk.message = text
            dlgSaveCategoryOk.open()
        }
    }

}
